import {
  createInbizSchema,
  createDecoratorStyleSchema,
  createComponentStyleSchema,
  createBizStyleSchema,
  createBizProps,
  createControllerSchema,
} from '@inbiz/setters';
export const MENU_HORIZONTAL = 'horizontal';
export const MENU_VERTICAL = 'vertical';

export const defaultProps = {
  rememberNum: 10,
  viewtype: 'modal',
  defaultType: '-1',
  defaultType1: '0',
  headerStyle: {
    icon: { type: 'icon-xiaoxi' },
  },
  style: {
    padding: '0px 20px 15px 20px',
  },
  modalIcon: { type: 'icon-ic-xiaoxi' },
  openWith: 'Pop up',
  modalPrompt: false,
  messageIcon: { type: 'icon-ic-xiaoxi1', color: 'rgba(244,166,35,1)' },
};

export const defaultH5Props = {
  h5Viewtype: 'small',
  headerStyle: {
    icon: { type: 'icon-xiaoxi' },
  },
  style: {
    padding: '0px 0px 15px 0px',
  },
  modalIcon: { type: 'icon-ic-xiaoxi' },
};

export const defaultBizProps = {
  msgGroup: [],
  range: 'current',
};

export const defaultH5BizProps = {
  msgGroup: [],
  range: 'current',
  msgGroupLayout: 'list',
};

export const propsSchema = createInbizSchema({
  attribute: {
    group_viewType: {
      type: 'void',
      'x-component': 'CollapseItem',
      properties: {
        'x-component-props': {
          type: 'object',
          properties: {
            viewtype: {
              type: 'string',
              enum: ['list', 'modal'],
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              'x-component-props': {
                defaultValue: 'list',
              },
              'x-reactions': {
                target: 'title',
                fulfill: {
                  state: {
                    hidden: '{{$self.value=="modal"}}',
                  },
                },
              },
            },
          },
        },
      },
    },
    base: {
      type: 'void',
      'x-component': 'CollapseItem',
      properties: {
        title: {
          type: 'object',
          'x-decorator': 'FormItem',
          'x-component': 'StatusInput',
        },
        'x-display': {
          type: 'string',
          enum: ['visible', 'hidden'],
          'x-decorator': 'FormItem',
          'x-component': 'Select',
          'x-component-props': {
            defaultValue: 'visible',
          },
        },
        'x-component-props': {
          type: 'object',
          properties: {
            openWith: {
              type: 'string',
              enum: ['Pop up', 'newPage', 'currentWindow'],
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              'x-component-props': {
                defaultValue: 'Pop up',
              },
              'x-reactions': {
                dependencies: ['.viewtype'],
                fulfill: {
                  schema: {
                    'x-hidden': '{{$deps[0] !== "modal" }}',
                  },
                },
              },
            },
            modalType: {
              type: 'string',
              enum: ['topDown', 'leftRight'],
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              'x-component-props': {
                defaultValue: 'topDown',
              },
              'x-reactions': {
                dependencies: ['.viewtype', '.openWith'],
                fulfill: {
                  schema: {
                    'x-hidden': '{{$deps[0] !== "modal" || $deps[1] !== "Pop up"}}',
                  },
                },
              },
            },
            defaultType: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              enum: ['-1', '0'],
              'x-reactions': {
                dependencies: ['.modalType', '.openWith'],
                fulfill: {
                  schema: {
                    'x-hidden': '{{$deps[0] === "leftRight" || $deps[1] !== "Pop up"}}',
                  },
                },
              },
              'x-component-props': {
                defaultValue: '-1'
              }
            },
            rememberNum: {
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-reactions': {
                dependencies: ['.openWith', '.viewtype', '.modalType'],
                fulfill: {
                  schema: {
                    'x-hidden': '{{ ($deps[0] == "newPage" || $deps[0] == "currentWindow") && $deps[1] =="modal" || $deps[0] == "Pop up" && $deps[1] =="modal" && $deps[2] =="leftRight" }}',
                  },
                },
              },
            },
            defaultType1: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              enum: ['0', '1'],
              'x-reactions': {
                dependencies: ['.modalType', '.viewtype', '.openWith'],
                fulfill: {
                  schema: {
                    'x-hidden': '{{$deps[1] !=="modal" || $deps[0] !== "leftRight" || $deps[2] !== "Pop up"}}',
                  },
                },
              },
              'x-component-props': {
                defaultValue: '0'
              }
            },
            correlationPage: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'PageSelect',
              'x-reactions': {
                dependencies: ['.openWith', '.viewtype'],
                fulfill: {
                  schema: {
                    'x-hidden': '{{ ($deps[0] !== "newPage" && $deps[0] !== "currentWindow") || $deps[1] !== "modal" }}',
                  },
                },
              },
            },
            modalPrompt: {
              type: 'boolean',
              'x-decorator': 'FormItem',
              'x-component': 'Switch',
              'x-reactions': {
                dependencies: ['.viewtype'],
                fulfill: {
                  schema: {
                    'x-hidden': '{{ $deps[0] !== "modal"  }}',
                  },
                },
              },
            },
            messageIcon: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'IconPicker',
              'x-component-props': {
                showIconSize: false,
              },
              'x-reactions': {
                dependencies: ['.viewtype', '.modalPrompt'],
                fulfill: {
                  schema: {
                    'x-hidden': '{{$deps[0] !== "modal" || $deps[1] != true}}',
                  },
                },
              },
            },
          },
        },
      },
    },

    ...createBizProps({
      range: {
        type: 'string',
        enum: ['current', 'customize'],
        'x-decorator': 'FormItem',
        'x-component': 'Select',
        'x-component-props': {
          defaultValue: 'customize',
        },
      },
      msgGroup: {
        type: 'array',
        'x-decorator': 'FormItem',
        'x-component': 'SelectMessageGroup',
        'x-reactions': {
          dependencies: ['.range'],
          fulfill: {
            schema: {
              'x-visible': '{{$deps[0] !== "current"}}',
            },
          },
        },
      },
    }),
  },
  style: {
    ...createComponentStyleSchema({
      modalIcon: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'IconPicker',
        'x-component-props': {
          showIconSize: false,
        },
        'x-reactions': {
          dependencies: ['.viewtype'],
          fulfill: {
            schema: {
              'x-hidden': '{{$deps[0] === "list"}}',
            },
          },
        },
      },
      ...createBizStyleSchema(
        {
          icon: {
            type: 'string',
            'x-decorator': 'FormItem',
            'x-component': 'IconPicker',
          },
        },
        {},
        undefined,
        {
          dependencies: ['.viewtype'],
          fulfill: {
            schema: {
              'x-hidden': '{{$deps[0] !== "list"}}',
            },
          },
        },
      ),
    }),
    ...createDecoratorStyleSchema(),
  },
  controller: createControllerSchema({
    events: [
      {
        name: "onChange",
        label: "未读消息数量改变事件",
      },
    ]
  })
});

export const propsH5Schema = createInbizSchema({
  attribute: {
    group_viewType: {
      type: 'void',
      'x-component': 'CollapseItem',
      properties: {
        'x-component-props': {
          type: 'object',
          properties: {
            h5Viewtype: {
              type: 'string',
              enum: ['small', 'list'],
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              'x-component-props': {
                defaultValue: 'list',
              },
              'x-reactions': [
                {
                  target: 'title',
                  fulfill: {
                    state: {
                      hidden: '{{$self.value=="small"}}',
                    },
                  },
                },
              ],
            },
          },
        },
      },
    },
    base: {
      type: 'void',
      'x-component': 'CollapseItem',
      properties: {
        title: {
          type: 'object',
          'x-decorator': 'FormItem',
          'x-component': 'StatusInput',
        },
        'x-display': {
          type: 'string',
          enum: ['visible', 'hidden'],
          'x-decorator': 'FormItem',
          'x-component': 'Select',
          'x-component-props': {
            defaultValue: 'visible',
          },
        },
        'x-component-props': {
          type: 'object',
          properties: {
            associatePage: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'PageSelect',
              'x-reactions': {
                dependencies: ['form.attribute.group_viewType.x-component-props.h5Viewtype'],
                fulfill: {
                  schema: {
                    'x-hidden': '{{$deps[0] !== "small"}}',
                  },
                },
              },
            }
          }
        }
      },
    },
    ...createBizProps({
      msgGroupLayout: {
        type: 'string',
        enum: ['list', 'grid', 'listAndGrid'],
        'x-decorator': 'FormItem',
        'x-component': 'Select',
        'x-component-props': {
          defaultValue: 'list',
        },
        'x-reactions': {
          dependencies: ['form.attribute.group_viewType.x-component-props.h5Viewtype'],
          fulfill: {
            schema: {
              'x-visible': '{{$deps[0] == "list"}}',
            },
          },
        },
      },
      range: {
        type: 'string',
        enum: ['current', 'customize'],
        'x-decorator': 'FormItem',
        'x-component': 'Select',
        'x-component-props': {
          defaultValue: 'customize',
        },
        'x-reactions': {
          dependencies: ['.msgGroupLayout'],
          fulfill: {
            schema: {
              'x-hidden': '{{$deps[0] == "listAndGrid"}}',
            },
          },
        },
      },
      msgGroup: {
        type: 'array',
        'x-decorator': 'FormItem',
        'x-component': 'SelectMessageGroup',
        'x-reactions': {
          dependencies: ['.msgGroupLayout', '.range'],
          fulfill: {
            schema: {
              'x-visible': '{{$deps[0] != "listAndGrid" && $deps[1] !== "current"}}',
            },
          },
        },
      },
      iconGrid: {
        type: 'array',
        'x-decorator': 'FormItem',
        'x-component': 'SelectMessageGroup',
        'x-reactions': {
          dependencies: ['.msgGroupLayout'],
          fulfill: {
            schema: {
              'x-visible': '{{$deps[0] == "listAndGrid"}}',
            },
          },
        },
      },
      listGroup: {
        type: 'array',
        'x-decorator': 'FormItem',
        'x-component': 'SelectMessageGroup',
        'x-reactions': {
          dependencies: ['.msgGroupLayout'],
          fulfill: {
            schema: {
              'x-visible': '{{$deps[0] == "listAndGrid"}}',
            },
          },
        },
      },
    }),
  },
  style: {
    ...createComponentStyleSchema({
      modalIcon: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'IconPicker',
        'x-component-props': {
          showIconSize: false,
        },
        'x-reactions': {
          dependencies: ['.h5Viewtype'],
          fulfill: {
            schema: {
              'x-hidden': '{{$deps[0] !== "small"}}',
            },
          },
        },
      },
      ...createBizStyleSchema(
        {
          icon: {
            type: 'string',
            'x-decorator': 'FormItem',
            'x-component': 'IconPicker',
          },
        },
        {},
        undefined,
        {
          dependencies: ['.h5Viewtype'],
          fulfill: {
            schema: {
              'x-hidden': '{{$deps[0] === "small"}}',
            },
          },
        },
      ),
    }),
    ...createDecoratorStyleSchema(),
  },
});
